<script setup lang="ts">
import { ref, computed } from 'vue'
import type { CartItems, product } from '@/types/shop'
// 搜索相关
const searchValue = ref('')
// 分类数据
const activeCategory = ref(0)
const categories = ref([
  { id: 1, name: '热销套餐' },
  { id: 2, name: '新品上市' },
  { id: 3, name: '单品区' },
  { id: 4, name: '优惠专区' },
  { id: 5, name: '主食' },
  { id: 6, name: '汤品' }
])

// 商品数据
const goodsList = ref([
  {
    id: 1,
    name: '预制菜套餐A',
    price: 39.0,
    image: 'https://pic2.zhimg.com/v2-36fa488ae45cc6e66970474156216c84_r.jpg',
    sales: 200,
    description: '含4菜1汤'
  },
  {
    id: 2,
    name: '预制菜套餐B',
    price: 49.0,
    image: 'https://pic2.zhimg.com/v2-36fa488ae45cc6e66970474156216c84_r.jpg',
    sales: 180,
    description: '含6菜1汤'
  },
  {
    id: 3,
    name: '预制菜套餐C',
    price: 49.0,
    image: 'https://pic2.zhimg.com/v2-36fa488ae45cc6e66970474156216c84_r.jpg',
    sales: 180,
    description: '含6菜1汤'
  },
  {
    id: 4,
    name: '预制菜套餐D',
    price: 49.0,
    image: 'https://pic2.zhimg.com/v2-36fa488ae45cc6e66970474156216c84_r.jpg',
    sales: 180,
    description: '含6菜1汤'
  }
])

// 切换分类
const changeCategory = (index: number) => {
  activeCategory.value = index
  
}

// 购物车数据
const cartList = ref<CartItems[]>([])

// 添加到购物车
const addToCart = (item:product) => {
  const existingItem = cartList.value.find(cartItem => cartItem.id === item.id)
  if(existingItem){
    existingItem.number++
  }else{
    cartList.value.push({...item, number: 1})
  }
} 

// 商品总价
const totalPrice = computed(() => {
  return cartList.value.reduce((total, item) => total + item.price * item.number, 0)
})

//购物车详情显示
const IfCartItems = ref(false)
const showCartItems = () => {
  IfCartItems.value = true
}

// 减少购物车商品数量
const decreaseCartItem = (item:CartItems) => {
  if(item.number > 1){
    item.number--
  }
  else{
    //移出购物车
    cartList.value = cartList.value.filter(item1 => item1.id !== item.id)
  }
}

// 增加购物车商品数量
const increaseCartItem = (item:CartItems) => {
  item.number++
}
</script>

<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-wrapper">
      <u-search 
        placeholder="搜索商品" 
        :show-action="false" 
        v-model="searchValue"
        shape="round"
      ></u-search>
    </view>
    <!-- 商品内容 -->
    <view class="content">
      <!-- 左侧分类 -->
      <scroll-view class="category-list" scroll-y>
        <view
          v-for="(item, index) in categories"
          :key="item.id"
          class="category-item"
          :class="{ active: index === activeCategory }"
          @tap="changeCategory(index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>

      <!-- 右侧商品列表 -->
      <scroll-view class="goods-list" scroll-y>
        <!-- 展示轮播图 -->
        <view class="banner">
          <image
            src="https://gd-hbimg.huaban.com/cac7df2be10510087cba387fdcb54db7e85fcb7b135d3-a2hBof_fw480webp"
            mode="widthFix"
            class="banner-image"
          />
        </view>

        <!-- 展示商品 --> 
        <view class="goods-container">
          <view 
            class="goods-item"
            v-for="item in goodsList"
            :key="item.id"
          >
            <image :src="item.image" mode="aspectFill" class="goods-image"></image>
            <view class="goods-info">
              <text class="goods-name">{{ item.name }}</text>
              <text class="goods-desc">{{ item.description }}</text>
              <view class="goods-bottom">
                <view class="price-box">
                  <text class="price-symbol">¥</text>
                  <text class="price-value">{{ item.price }}</text>
                  <text class="sales-info">已售{{ item.sales }}份</text>
                </view>
                <view class="add-cart" @tap="addToCart(item)">
                  <text class="add-btn">+</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 购物车详情 -->
    <view class="cart-items" v-if="IfCartItems">
      <view class="cart-items-header">
        <text class="cart-items-title">购物车</text>
        <text @tap="IfCartItems = false">x</text>
      </view>

      <scroll-view class="cart-items-list" scroll-y>
        <view class="cart-item" v-for="item in cartList" :key="item.id">
          <image :src="item.image" mode="aspectFill" class="cart-item-image"></image>
          <view class="cart-item-info">
            <text class="cart-item-name">{{ item.name }} x{{ item.number }}</text>
            <text class="cart-item-del" @tap="decreaseCartItem(item)">-</text>
            <text class="cart-item-add" @tap="increaseCartItem(item)">+</text>
            <text class="cart-item-price">¥{{ item.price }} x{{ item.number }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 购物车 -->
    <view class="cart">
      <view class="cart-left" @tap="showCartItems">
        <view class="cart-icon-wrapper">
          <image
            src="/src/static/icons/cart.png"
            mode="aspectFit"
            class="cart-icon"
          />
          <view class="cart-badge" v-if="false">0</view>
        </view>
        <view class="price-info">
          <text class="total-price">¥{{ totalPrice }}</text>
          <text class="delivery-fee">另需配送费 ¥5</text>
        </view>
      </view>
      <view class="cart-right">
        <text>去结算</text>
      </view>
    </view>

  </view>
</template>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.search-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.content {
  display: flex;
  height: 92vh;
}

.category-list {
  width: 180rpx;
  background-color: #f8f8f8;
  height: 100%;
}

.category-item {
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #666;
  position: relative;
  transition: all 0.3s;
}

.category-item.active {
  background-color: #fff;
  color: #63aa5d;
  font-weight: 500;
}

.category-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  height: 36rpx;
  width: 6rpx;
  background-color: #63aa5d;
  border-radius: 0 3rpx 3rpx 0;
  top: 50%;
  transform: translateY(-50%);
}

.goods-list {
  flex: 1;
  background-color: #fff;
}

.banner {
  padding: 20rpx;
}

.banner-image {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.goods-container {
  padding: 0 20rpx;
}

.goods-item {
  display: flex;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.goods-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 25rpx;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.goods-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
}

.goods-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.price-box {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.price-symbol {
  font-size: 24rpx;
  color: #ff6b6b;
  margin-right: 2rpx;
}

.price-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b6b;
  margin-right: 15rpx;
}

.sales-info {
  font-size: 22rpx;
  color: #999;
}

.add-cart {
  width: 56rpx;
  height: 56rpx;
  background: linear-gradient(135deg, #63aa5d, #81c17a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(99, 170, 93, 0.2);
  transition: all 0.2s;
}

.add-btn {
  color: #fff;
  font-size: 40rpx;
  font-weight: bold;
}

.add-cart:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.cart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  height: 110rpx;
  border-radius: 60rpx;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.cart-left {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 40rpx;
  gap: 25rpx;
}

.cart-icon-wrapper {
  position: relative;
}

.cart-icon {
  width: 52rpx;
  height: 52rpx;
  opacity: 0.9;
}

.cart-badge {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  background-color: #ff6b6b;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  min-width: 28rpx;
  text-align: center;
}

.price-info {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.total-price {
  color: #333;
  font-size: 34rpx;
  font-weight: 600;
}

.delivery-fee {
  color: #999;
  font-size: 22rpx;
}

.cart-right {
  background: linear-gradient(135deg, #63aa5d, #81c17a);
  height: 100%;
  padding: 0 50rpx;
  border-radius: 0 60rpx 60rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.cart-right text {
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
}

.cart-right:active {
  opacity: 0.9;
  transform: scale(0.98);
}

.cart-items {
  position: fixed;
  bottom: 170rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  max-height: 60vh;
  background-color: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 999;
}

.cart-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.cart-items-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.cart-items-header text:last-child {
  font-size: 32rpx;
  color: #999;
  padding: 10rpx 15rpx;
}

.cart-items-list {
  max-height: calc(60vh - 100rpx);
  padding: 20rpx 30rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f8f8f8;
}

.cart-item-image {
  width: 90rpx;
  height: 90rpx;
  border-radius: 12rpx;
  margin-right: 25rpx;
}

.cart-item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-item-name {
  font-size: 26rpx;
  color: #333;
  width: 260rpx;
}

.cart-item-del, .cart-item-add {
  width: 44rpx;
  height: 44rpx;
  line-height: 40rpx;
  text-align: center;
  border-radius: 50%;
  background: #f5f5f5;
  color: #333;
  font-size: 28rpx;
  margin: 0 15rpx;
  transition: all 0.2s ease;
}

.cart-item-del:active, .cart-item-add:active {
  background: #eee;
  transform: scale(0.95);
}

.cart-item-price {
  font-size: 28rpx;
  color: #ff6b6b;
  margin-left: auto;
  margin-right: 40rpx;
}
</style>